import { ColumnProps } from 'antd/lib/table';

import { Row, Spin, Table, Button } from 'antd';

import React from 'react';
import { Link } from 'umi';
import { Advertise, StateType } from '../model';
import ISwitch from '@/pages/product/add/components/ISwitch';
import { ListContext, List } from '..';

const columns: ColumnProps<Advertise>[] = [
  {
    title: '编号',
    dataIndex: 'id',
    align: 'center',
  },
  {
    title: '广告名称',
    dataIndex: 'name',
    align: 'center',
  },
  {
    title: '广告图片',
    dataIndex: 'pic',
    align: 'center',
    render: url => <img style={{ height: '80px' }} src={url} alt="广告图片" />,
  },
  {
    title: '上线/下线',
    dataIndex: 'status',
    align: 'center',
    render: (text, record) => (
      <ListContext.Consumer>
        {list => (
          <ISwitch
            value={text}
            onChange={value => {
              list.handleUpdate({
                ...record,
                status: value,
              });
            }}
          />
        )}
      </ListContext.Consumer>
    ),
  },
  {
    title: '点击次数',
    dataIndex: 'clickCount',
    align: 'center',
  },
  {
    title: '操作',
    key: 'actions',
    width: '200px',
    align: 'center',
    render: (_text, record) => (
      <ListContext.Consumer>
        {list => (
          <div className="horizon-button-group">
            <a
              href="#"
              onClick={e => {
                e.preventDefault();
                list.handleRemove(record.id);
              }}
            >
              移除
            </a>
          </div>
        )}
      </ListContext.Consumer>
    ),
  },
];

export interface ListTableProps extends StateType {
  loading?: boolean;
}

export default (props => (
  <Row>
    <Spin spinning={props.loading}>
      <Table<Advertise> dataSource={props.list} columns={columns} rowKey="id" bordered />
    </Spin>
  </Row>
)) as React.FC<ListTableProps>;
